<template>
  <div>
    <div class="top">
      <span>人员列表</span>
      <van-popover
        v-model="showPopover"
        theme="dark"
        trigger="click"
        :actions="options"
        @select="onOption"
        placement="bottom-end"
      >
        <template #reference>
          <van-button icon="plus" type="info" size="small">新增</van-button>
        </template>
      </van-popover>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="card-list">
        <li v-for="item in list" :key="item.fxPurposeid">
          <div class="card-left"><img :src="item.purposeUrl" alt="" /></div>
          <div class="card-right">
            <p>{{ item.createTimeStr }}</p>
            <div>
              <span>{{ item.weekStr }}</span>
              <a
                @click.prevent="del(item.fxPurposeid)"
                v-show="item.status == 0"
                >删除</a
              >
            </div>
            <div>
              <van-button
                plain
                type="info"
                size="small"
                @click="viewResult(item)"
                >查看结果</van-button
              >
              <van-button
                plain
                type="info"
                size="small"
                @click="viewImg(item.purposeUrl)"
                >查看意向单</van-button
              >
            </div>
          </div>
        </li>
      </ul>
    </van-list>
    <!-- 上传 -->
    <van-uploader
      v-show="false"
      :after-read="afterRead"
      id="uploadFile"
      ref="commonUpload"
    />

    <van-overlay :show="loadingShow" @click="loadingShow = false">
      <div class="wrapper" @click.stop>
        <van-loading />
      </div>
    </van-overlay>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
import {
  getPurposeList,
  getBusinessConfigList,
  deleteUser,
  purposeUpload
} from '../service/service.js'
import { ImagePreview } from 'vant'
export default {
  name: 'Wishlist',
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data () {
    return {
      show: false,
      actions: [{ name: '拍照' }, { name: '相册' }],
      pageNo: 1,
      pageSize: 10,
      totalCount: '',
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      options: [],
      mpriceid: '',
      loadingShow: false,
      list: [],
      loading: false,
      finished: false
    }
  },
  created () {
    getBusinessConfigList({ shopUserId: '-1' })
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.options = data.data.map((item) => {
          return {
            text: item.priceDesc,
            id: item.m_priceid
          }
        })
      })
      .catch((err) => {
        console.log(err)
      })
    // this.getList()
  },
  computed: {
    loginInfo () {
      return this.$store.state.shopAssistant.loginInfo
    }
  },
  methods: {
    onLoad () {
      this.getList()
    },
    getList () {
      getPurposeList({ pageNo: this.pageNo, pageSize: this.pageSize })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }

          this.totalCount = Math.ceil(data.data.totalCount / this.pageSize)
          this.list = [...this.list, ...data.data.purposeList]

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.pageNo >= this.totalCount) {
            this.finished = true
            return
          }
          this.pageNo++
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onOption (action) {
      this.mpriceid = action.id

      if (this.loginInfo.loginSrc === 0) {
        this.show = true
        return
      }

      document.querySelector('#uploadFile').click()
    },
    // add () {
    //   // this.$router.push({ path: '/admin/shopAssistant-add' })
    //   // this.show = true
    //   //  document.querySelector('#uploadFile').click()
    // },
    afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'

      this.loadingShow = true

      const formData = new FormData()
      formData.append('uploadFile', file.file)
      formData.append('mpriceid', this.mpriceid)

      purposeUpload(formData)
        .then((result) => {
          const data = result.data
          this.loadingShow = false
          if (data.ret !== 0) {
            // this.$toast(data.msg)
            file.status = 'failed'
            file.message = '上传失败'

            this.$toast(data.msg)
            return false
          }
          this.list = []
          this.pageNo = 1
          this.onLoad()
          // this.uploadPopup = true

          // this.img = data.fileUrl
          // this.saveInfo()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    del (val) {
      this.$dialog
        .confirm({
          title: '确定删除意向单？'
        })
        .then(() => {
          deleteUser({ fxPurposeId: val })
            .then((res) => {
              const data = res.data
              if (data.ret !== 0) {
                this.$toast(data.msg)
                return false
              }
              this.$toast(data.msg)
              this.list = []
              this.pageNo = 1
              this.onLoad()
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    onCancel () {
      // Toast('取消')
    },
    onSelect (option) {
      this.show = false
      if (option === '拍照') {
        if (navigator.userAgent.indexOf('iPhone') > -1) {
          window.location.href = "ios:H5CallCamera0(0,0,'')"
        } else {
          window.injs.H5CallCamera0('0', '0', '')
        }
      } else {
        if (navigator.userAgent.indexOf('iPhone') > -1) {
          window.location.href = "ios:H5CallAlbum00(0,0,'')"
        } else {
          window.injs.H5CallAlbum00('0', '0', '')
        }
      }
      console.log(option)
    },
    viewImg (val) {
      ImagePreview([val])
    },
    viewResult (item) {
      console.log(item)
      if (item.status === 0) {
        this.$router.push({ path: '/personal/processing' })
      } else {
        this.$router.push({
          path: '/personal/processResult',
          query: { fxPurposeId: item.fxPurposeid }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  padding: 10px 15px 15px;
  display: flex;
  justify-content: space-between;
  line-height: 32px;
  span:first-child {
    font-size: 16px;
    font-weight: 700;
  }
}
.card-list {
  padding: 0 20px;
  background: #fff;
  li {
    display: flex;
    padding: 15px 0;

    border-top: 1px solid #ebedf0;
    .card-left {
      margin-right: 15px;
      width: 100px;
      img {
        width: 100%;
      }
    }
    .card-right {
      flex: 1;
      p {
        color: #999;
        font-size: 13px;
      }
      > div:nth-child(2) {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        span {
          color: #999;
          font-size: 13px;
        }
        a {
          color: #1b5083;
          font-size: 13px;
        }
      }
      > div:last-child {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
        }
      }
    }
  }
}
/deep/ .van-popover__action {
  width: 240px;
}
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
